<script setup>
	import { ref,reactive } from 'vue'
	let age=ref(18)
	let car=reactive({brand:'奔驰',price:200})
	/*car={brand:'问界',price:200}   //car变为非响应式
	car=reactive({brand:'小米',price:200})    //car变非响应式
	Object.assign(car,{brand: '奥拓',price:100})  //响应式*/
	function changeAge() {
		age.value++
	}
	function changeCarPrice() {
		car.price+=10
	}
	function changeCar(){
		//car={brand:'问界',price:200}   //car变为非响应式
		car=reactive({brand:'小米',price:200})    //car变非响应式
		//car=Object.assign(car,{brand: '奥拓',price:100})
		console.log(car)
	}
</script>

<template>
  <div class="person">
	  <h2>年龄：{{age}}</h2>
	  <h2>汽车信息：一台{{car.brand}},价格{{car.price}}</h2>
      <button @click="changeAge()">改变年龄</button>
      <button @click="changeCarPrice()">改变价格</button>
      <button @click="changeCar()">改变信息</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>